<template>
    <div
        id="radarChart"
        class="chart"
    />
</template>
<script>
export default {
    props: {
        radarData: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            myChart: null
        }
    },
    watch: {
        radarData: {
            handler() {
                this.$nextTick(() => {
                    this.drawLine()
                })
            },
            deep: true
        }
    },
    mounted() {
        // this.drawLine()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.changeSize, true)
    },
    methods: {

        drawLine() {
            if (this.myChart) {
                this.myChart.clear()
                this.$echarts.dispose(this.myChart)
            }
            let optionData = JSON.parse(JSON.stringify(this.radarData))
            let xiansuo = optionData.xiansuo.xiansuo > optionData.xiansuo.xiansuoQiwang ? optionData.xiansuo.xiansuo : optionData.xiansuo.xiansuoQiwang
            let memberAvg = optionData.memberAvg.memberAvg > optionData.memberAvg.memberAvgPriceQiwang ? ptionData.memberAvg.memberAvg : optionData.memberAvg.memberAvgPriceQiwang
            let chengjiaoDay = optionData.chengjiaoDay.chengjiaoDay > optionData.chengjiaoDay.chengjiaoDayQiwang ? optionData.chengjiaoDay.chengjiaoDay : optionData.chengjiaoDay.chengjiaoDayQiwang
            let chengjiaoPrice = optionData.chengjiaoPrice.chengjiaoPrice > optionData.chengjiaoPrice.chengjiaoPriceQiwang ? optionData.chengjiaoPrice.chengjiaoPrice : optionData.chengjiaoPrice.chengjiaoPriceQiwang
            let dayAddUser = optionData.dayAddUser.dayAddUser > optionData.dayAddUser.dayAddUserQiwang ? optionData.dayAddUser.dayAddUser : optionData.dayAddUser.dayAddUserQiwang
            let kehu = optionData.kehu.kehu > optionData.kehu.kehuQiwang ? optionData.kehu.kehu : optionData.kehu.kehuQiwang
            let indicator = [
                { "name": `线索$${optionData.xiansuo.xiansuo}`, max: xiansuo},
                { "name": `月均收款$${optionData.memberAvg.memberAvg}`, max: memberAvg },
                { "name": `成交周期$${optionData.chengjiaoDay.chengjiaoDay}`, max: chengjiaoDay },
                { "name": `成交金额$${optionData.chengjiaoPrice.chengjiaoPrice}`, max: chengjiaoPrice },
                { "name": `新增线索$${optionData.dayAddUser.dayAddUser}`, max: dayAddUser },
                { "name": `客户复购$${optionData.kehu.kehu}`, max: kehu }
            ]
            console.log(indicator)
            let data = [optionData.xiansuo.xiansuo, optionData.memberAvg.memberAvg, optionData.chengjiaoDay.chengjiaoDay, optionData.chengjiaoPrice.chengjiaoPrice, optionData.dayAddUser.dayAddUser, optionData.kehu.kehu]
            console.log(data)
            let option = {
                // 图例
                "legend": {
                    "show": false
                },
                "tooltip": {},
                "color": ["rgba(71, 141, 255, 0.83)", "rgba(31, 217, 208, 0.83)"],
                "radar": [
                    {
                        "shape": "circle",
                        "radius": "65%",
                        // 雷达图指标名称，用%拼接，分割使用
                        "indicator": indicator,
                        "splitArea": {
                            "areaStyle": {
                                "color": ["#598EFF", "#88aefa", "#bad5fe", "#e2ecff", "#fff"]
                            }
                        },
                        "splitLine": {
                            "lineStyle": {
                                "color": "#969696",
                                "type": "dotted",
                                "width": 2
                            }
                        },
                        "axisLine": {
                            "lineStyle": {
                                "color": "#9EC3FF"
                            }
                        },
                        "axisName": {
                            "show": true,
                            // 分割指标名后，文字样式
                            "rich": {
                                "a": {
                                    "fontSize": 14,
                                    "lineHeight": 18
                                },
                                "b": {
                                    "fontSize": 12,
                                    "lineHeight": 18
                                },
                                "c": {
                                    "fontSize": 14,
                                    "color": "#478DFF",
                                    "lineHeight": 18
                                },
                                "d": {
                                    "fontSize": 14,
                                    "color": "#1FD9D1",
                                    "lineHeight": 18
                                },
                                "e": {
                                    "fontSize": 12,
                                    "lineHeight": 18
                                }
                            },
                            // 分割上方写的指标名。
                            "formatter": params => {
                                let arrStr = params ? params.split('$') : ['', '', ''];
                                return `{a| ${arrStr[0]}}\n{c|●}{b| ${arrStr[1]}}`;
                            },
                            "color": "#333"
                        }
                        
                    },
                    {
                        "shape": "circle",
                        "radius": "65%",
                        "indicator": indicator,
                        "axisLine": {
                            "lineStyle": {
                                "color": "transparent"
                            }
                        }
                    }
                ],
                "series": [
                    {
                        "name": "显示图形",
                        "type": "radar",
                        "tooltip": {
                            "show": false
                        },
                        "areaStyle": {
                            "opacity": 0.95
                        },
                        "itemStyle": {
                            "borderColor": "#fff",
                            "borderWidth": 1
                        },
                        "label": {
                            "show": false,
                            "color": "#333"
                        },
                        "data": [
                            {
                                "value": data
                            }
                        ]
                    },
                    {
                        "name": "显示提示",
                        "type": "radar",
                        "symbol": "none",
                        "lineStyle": {
                            "color": "transparent"
                        },
                        "zlevel": 1,
                        "tooltip": {
                            show: true,
                            // 自定义显示x轴提示，主要在第二个雷达图中实现，echarts官方tootips设置trigger：axis不生效。
                            formatter: params => {
                                let { data } = params.data;
                                console.log(params)
                                return `${params.name}<br />期望值： ${data[0]}<br />完成值： ${data[1]}<br/> 百分比：${data[2]}`;
                            }
                        },
                        "data": [
                            {
                                "value": [optionData.xiansuo.xiansuoQiwang, 0, 0, 0, 0, 0],
                                "data": [optionData.xiansuo.xiansuoQiwang, optionData.xiansuo.xiansuo, optionData.xiansuo.xiansuoRate],
                                "name": "线索"
                            },
                            {
                                "value": [0, optionData.memberAvg.memberAvgPriceQiwang, 0, 0, 0, 0],
                                "data": [ optionData.memberAvg.memberAvgPriceQiwang,  optionData.memberAvg.memberAvg,  optionData.memberAvg.memberAvgRate],
                                "name": "月均收款"
                            },
                            {
                                "value": [0, 0, optionData.chengjiaoDay.chengjiaoDayQiwang, 0, 0, 0],
                                "data": [ optionData.chengjiaoDay.chengjiaoDayQiwang,  optionData.chengjiaoDay.chengjiaoDay,  optionData.chengjiaoDay.chengjiaoRate],
                                "name": "成交周期"
                            },
                            {
                                "value": [0, 0, 0, optionData.chengjiaoPrice.chengjiaoPriceQiwang, 0, 0],
                                "data": [ optionData.chengjiaoPrice.chengjiaoPriceQiwang, optionData.chengjiaoPrice.chengjiaoPrice, optionData.chengjiaoPrice.chengjiaoPriceRate],
                                "name": "成交金额"
                            },
                            {
                                "value": [0, 0, 0, 0, optionData.dayAddUser.dayAddUserQiwang, 0],
                                "data": [optionData.dayAddUser.dayAddUserQiwang, optionData.dayAddUser.dayAddUser, optionData.dayAddUser.dayAddUserRate],
                                "name": "新增线索"
                            },
                            {
                                "value": [0, 0, 0, 0, 0, optionData.kehu.kehuQiwang],
                                "data": [optionData.kehu.kehuQiwang, optionData.kehu.kehu, optionData.kehu.kehuRate],
                                "name": "客户复购"
                            }
                        ]
                    }
                ]
            };

            this.myChart = this.$echarts.init(document.getElementById('radarChart'))
            // 绘制图表
            this.myChart.setOption(option)
            window.addEventListener('resize', this.changeSize, true)
        },
        changeSize() {
            this.myChart.resize()
        }
    }
}
</script>

<style lang="scss" scoped>
.chart {
    width: 100%;
    height: 100%;
}
</style>
